<template>
	<scroll-view scroll-y="true" scroll-top="0" style="height:100vh;background-color: #fff;" :enable-back-to-top="true">
		<view class="my">
			<!-- 我的 -->
			<!-- 头部 -->
			<view class="header">

				<view class="header-box">
					<view class="header-top">



					</view>
					<view class="header-bottom" v-if="login===true" @click="clickInformation">
						<view class="header-bottom-left">

							<u--image :src="users.avatarUrl" shape="circle" width="60px" height="60px"></u--image>
							<text class="header-bottom-left-text">{{users.nickName}}</text>
							<view class="gender" v-if="users.sex===2" style="background-color: #EC808D;">
								<u-icon name="woman" color="#fff" size="15"></u-icon>
							</view>
							<view class="gender" v-else-if="users.sex===1" style="background-color: #409DFE">
								<u-icon name="man" color="#fff" size="15"></u-icon>
							</view>
							<view class="gender-tail" v-else>
								保密
							</view>
						</view>
						<view class="header-bottom-right">
							<u-icon name="arrow-right" color="#D5D5D5" size="24"></u-icon>
						</view>
					</view>
					<view class="header-bottom" v-else>
						<view class="header-bottom-left" style="background-color: #fff;border-radius: 100%;">
							<u--image src="/static/details/default.png" shape="circle" width="60px"
								height="60px"></u--image>


						</view>
						<!-- <view > -->
						<!--   -->
						<button class="logon" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
							立即登录
						</button>
						<!-- </view> -->
					</view>
				</view>
			</view>
			<!-- 中间 -->
			<view class="content">
				<view class="content-top">
					<view class="content-top-text">
						辅导对象({{counsellingData.length }})
					</view>
					<view class="">
						<u-icon name="arrow-right" color="#D5D5D5" size="24" @click="wholeCounselling"></u-icon>
					</view>
				</view>
				<scroll-view class="scroll-view" scroll-x="true">
					<view v-if="counsellingData.length!==0">
						<view class="scroll-view-content" v-for="(item,index) in counsellingData"
							:style="{ backgroundColor:item.counsellingSex===0?'#02A7F0':'#EC808D' }"
							@click="clickCounselling(item)">
							<view class="scroll-view-content-row" style="margin-top: 10rpx;">
								<text class="scroll-view-content-row-title">{{item.counsellingName}}</text>
								<text>{{item.gender===0?' 女':'男' }}</text>
							</view>
							<view class="scroll-view-content-row">
								<text>{{item.counsellingBirth}} 出生</text>
								<text>{{item.age}}岁</text>
							</view>
							<view class="scroll-view-content-row">
								<text
									v-if="item.subjectsDtos.length != 0">{{item.subjectsDtos[0].name}}{{item.subjectsDtos[0].subjectsDtos}}</text>
								<text v-else>暂无</text>

							</view>
						</view>
					</view>
					<view v-else>
						<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" width="250rpx"
							height="250rpx">
						</u-empty>
					</view>
				</scroll-view>
			</view>
			<view class="content-img">
				<image src="../../static/image/my.png" mode="" @click="checkInImage"></image>
			</view>
			<view class="floor">
				<view class="floor-top" @click="feeStandards">
					<view class="floor-left">
						<view class="floor-left-img">
							<image src="../../static/image/收费标准.png" mode=""></image>
						</view>
						<text>收费标准</text>
					</view>
					<view class="floor-right">
						<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
					</view>
				</view>
				<view class="floor-top" @click="complaintSuggestions">
					<view class="floor-left">
						<view class="floor-left-img">
							<image src="../../static/image/投诉建议.png" mode=""></image>
						</view>
						<text>投诉建议</text>
					</view>
					<view class="floor-right">
						<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		log
	} from "util"
	import {
		wxLogin,
		coachingTargets,
		listOpenId
	} from "../../api/my/index.js"
	import {
		setToken,
		getToken,
		removeToken
	} from '@/lib/auth.js'
	export default {
		data() {
			return {
				// 我的信息
				users: {},
				// 判断是否微信登录
				login: false,
				// 辅导对象
				counsellingData: []
			}
		},

		methods: {
			// 微信一键登录
			decryptPhoneNumber(e) {

				if (e.detail.errMsg == "getPhoneNumber:ok") {
					//  e.detail.code 调用接口传给后端获取手机号
					console.log(e.detail.code);

					this.clickLogon()
				}
			},
			// 微信登录
			clickLogon() {

				wx.login({
					provider: 'weixin',
					success: (res) => {
						// 调用登录接口
						wxLogin({
							code: res.code
						}).then(res => {
							const now = new Date(res.data.data).getTime();
							let data = res.data.user
							setToken(res.data.token)
							wx.setStorageSync('openId', data.openid);
							wx.setStorageSync('sessionKey', data.session_key);
							// 本地存储 user
							wx.setStorageSync('user', JSON.stringify(data));
							// this.$store.commit("SET_USER", data);
							this.myCoaching()
							this.myLogin()

							uni.showToast({
								title: '登录成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'none',
								//显示持续时间为 2秒
								duration: 2000
							})

						})
					},

				})
			},
			// 点击收费标准 跳转
			feeStandards() {
				uni.navigateTo({
					url: '/pages/chargeStandard/chargeStandard'
				})
			},
			// 点击投诉建议
			complaintSuggestions() {
				if (wx.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/complaint/complaint'
					})
				} else {
					uni.showToast({
						title: '请先登录',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}

			},
			// 点击辅助对象单个详情
			clickCounselling(item) {
				console.log(item, 'EDD');
				uni.navigateTo({
					url: `/pages/basicInformation/basicInformation?targetsName=${item.counsellingName}`
				})
			},
			// 点击辅助对象查看全部列表
			wholeCounselling() {
				if (wx.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/wholeCounselling/wholeCounselling'
					})
				} else {

					uni.showToast({
						title: '请先登录',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}

			},
			// 个人信息
			clickInformation() {
				uni.navigateTo({
					url: '/pages/personalInfo/personalInfo'
				})
			},
			// 点击跳转入住平台
			checkInImage() {
				// console.log('11');
				uni.navigateTo({
					url: '/pages/checkInPlatform/checkInPlatform'
				})
			},
			// 我的信息
			myLogin() {
				// 我的信息
				listOpenId({
					openId: uni.getStorageSync('openId')
				}).then(res => {
					this.login = true
					this.users = res.data
					console.log(this.users);
				})
			},
			// 辅导对象
			myCoaching() {
				// 辅导对象
				coachingTargets({
					userId: uni.getStorageSync('openId')
				}).then(res => {
					this.counsellingData = res.rows
				})
			}
		},

		onShow() {
			if (wx.getStorageSync('token')) {
				this.myLogin()
				this.myCoaching()
				return
			} else {
				this.login = false
				this.myCoaching()
			}





		},
	}
</script>

<style scoped>
	.my {
		width: 100%;
		/* min-height: 100vh; */
		background-color: #fff;
		position: relative;

	}

	.header {
		width: 750rpx;
		height: 320rpx;
		background-color: #FF9600;
		display: flex;
		border-radius: 0 0 28rpx 28rpx;
		justify-content: center;

	}

	.header-box {
		width: 95%;
	}

	.header-top {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 33rpx;


	}


	.header-bottom {
		height: 120rpx;

		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.logon {
		width: 300rpx;
		height: 90rpx;
		background-color: #fff;
		border-radius: 100rpx;
		margin-right: 25%;
		display: flex;
		color: #F99817;
		justify-content: center;
		align-items: center;
	}

	.header-bottom-left {
		display: flex;
		align-items: center;
		margin-left: 20rpx;

	}

	.header-bottom-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.header-bottom-left-text {
		margin-left: 20rpx;
		color: #fff;
	}

	::v-deep .u-badge--error.data-v-662d25bf {
		position: absolute;
		top: 20rpx;

		background-color: #D9001B !important;
	}

	.gender {
		margin-left: 20rpx;
		border-radius: 100%;

		width: 45rpx;
		height: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gender-tail {
		margin-left: 20rpx;
		font-size: 20rpx;
		color: #000;
	}

	.content {
		z-index: 1;
		width: 96%;
		height: 350rpx;
		margin: -90rpx auto 0;
		border-radius: 25rpx;

		background-color: #fff;
		box-shadow: 0px 3px 10px -7px #000;
	}

	.content-top {
		height: 100rpx;
		margin: 0 35rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.content-top-text {
		font-weight: 550;
		font-size: 30rpx;
	}

	.scroll-view {
		display: flex;
		white-space: nowrap;
		width: 97.5%;
		height: 180rpx;
		margin-left: 15rpx;
	}

	.scroll-view-content {
		width: 300rpx;
		margin-left: 20rpx;
		height: 180rpx;
		display: inline-block;
		background-color: #EC808D;
		border-radius: 10rpx;
	}

	.scroll-view-content-row {
		margin-top: 2rpx;
		color: #fff;
		font-size: 25rpx;
		line-height: 50rpx;

	}

	.scroll-view-content-row-title {

		font-weight: 600;
	}

	.scroll-view-content-row text {
		margin-left: 20rpx;
	}

	.content-img {

		width: 95%;
		height: 200rpx;
		margin: 20rpx auto 0;

	}

	.content-img image {
		width: 100%;
		height: 100%;
	}

	.floor {
		width: 95%;
		height: 300rpx;
		margin: 30rpx auto 0;

	}

	.floor-top {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
	}

	.floor-left {
		margin-left: 40rpx;
		display: flex;
		align-items: center;
		font-weight: 100;
	}

	.floor-left-img {
		margin-right: 25rpx;
		display: inline-block;
		width: 50rpx;
		height: 50rpx;

	}

	.floor-left-img image {
		width: 100%;
		height: 100%;
	}

	.floor-right {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}


	/* 登录下样式 */
	.login-container {
		/* 登录盒子的样式 */
		height: 850rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: 255, 85, 57;
		position: relative;
		overflow: hidden;
		text-align: center;
	}

	/* 绘制登录盒子底部的半椭圆造型 */
	.login-container ::after {
		content: ' ';
		display: block;
		position: absolute;
		width: 100%;
		height: 40px;
		left: 0;
		bottom: 0;
		background-color: white;
		border-radius: 100%;
		transform: translateY(50%);
	}

	/* 登录按钮的样式 */
	.btn-login {
		width: 60%;
		border-radius: 100px;
		padding: 10px;
		margin: 20px 0;
		background-color: #ff5539;
		color: white;
	}

	/* 按钮下方提示消息的样式 */
	.tips-text {
		font-size: 14px;
		color: gray;
	}
</style>